import "./App.css";
import { Component } from "react";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      monsters: [],
    };
  }
  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((users) =>
        this.setState(
          () => {
            return { monsters: users };
          },
          () => {
            console.log(this.state);
          }
        )
      );
  }

  render() {
    return (
      <div className="App">
        <input
          className="search-box"
          type="search"
          placeholder="search monsters"
          onChange={(event)=>{
            console.log(event)
            const searchString = event.target.value.toLocaleLowerCase()
            const filteredMonsters = this.state.monsters.filter((monster)=>{
             return monster.name.toLocaleLowerCase().includes(event.target.value)
            })
            this.setState(()=>{
              return {
                monsters: filteredMonsters,
              }
            })
          }}
        />
        {this.state.monsters.map((monster, index) => {
          return <h1 key={monster.id}>{monster.name}</h1>;
        })}
      </div>
    );
  }
}

export default App;
